<!--
 * @Author: 雷佳斌 leijiabin@yunjinhz.com
 * @Date: 2024-04-18 14:25:35
 * @LastEditors: 雷佳斌 leijiabin@yunjinhz.com
 * @LastEditTime: 2024-05-14 17:14:57
 * @FilePath: \zmglpt-ui-mobile-v1.1\dev\pages\threeMembersTeamWork\components\list-card.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<view class="card teamwork-card" @click="handleClick">
		<view class="teamwork-card__left">
			<view class="teamwork-type">{{ data.exceptionDesc }}</view>
		</view>
		<view class="teamwork-card__right">
			<view class="title">三岗联动</view>
			<!-- <view><text>{{ data.taskNote || "-" }}</text></view> -->
			<view style="display: flex;">
				发起人：{{ data.reporterName }}
			</view>
			<view style="display: flex;">
				处理人：{{ data.handlePersonNames }}
			</view>
			<view style="display: flex;">
				状态：{{ data.taskStatusName }}
			</view>
		</view>
	</view>
</template>

<script>
	const allTaskLevel = {
		"01": {
			text: "一般",
			color: "#2979ff"
		},
		"02": {
			text: "紧急",
			color: "#f90"
		},
		"03": {
			text: "特急",
			color: "#fa3534"
		}
	};

	export default {
		props: {
			data: {
				type: Object,
				default: () => null
			}
		},
		data() {
			return {
				allTaskLevel
			}
		},
		methods: {
			handleClick() {
				this.$emit("click", this.data);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.teamwork-card {
		position: relative;
		display: flex;
		align-items: center;
		padding: 10px 20rpx;
		overflow: hidden;
	}
	.teamwork-card__left {
		width: 120rpx;
		height: 120rpx;
		line-height: 120rpx;
		text-align: center;
		color: #fff;
		border-radius: 50%;
		background-color: orange;
		font-size: 32rpx;
		font-weight: 600;
	}
	.teamwork-card__right {
		flex: 1;
		padding-left: 20rpx;
		.title {
			font-size: 30rpx;
			font-weight: 600;
		}
	}
	.tag {
		padding: 12rpx 24rpx;
		border-radius: 30rpx;
		background-color: rgba(0, 112, 210, .8);
		color: #fff;
	}
	.task-level {
		position: absolute;
		width: 160rpx;
		height: 48rpx;
		line-height: 48rpx;
		text-align: center;
		right: -50rpx;
		top: 10rpx;
		font-size: 24rpx;
		color: #fff;
		transform: rotate(45deg);
	}
</style>